<template>
  <div class="channel">
    <Top></Top>
    <main>
      <!-- 大气生态 -->
      <template>
        <el-table
          :data="tableData"
          size="mini"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
          style="width: 100%"
        >
          <el-table-column prop="tlt" label="大气生态">
            <el-table-column prop="content" label="数据类容"></el-table-column>

            <el-table-column label="数据修改">
              <template slot-scope="scope">
                <el-input
                  type="text"
                  v-model="scope.row.no"
                  @change="change1(scope.row)"
                  style="border: 1px solid #ccc"
                  placeholder="请输入资源数量"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column prop="explain" label="说明"> </el-table-column>
          </el-table-column>
        </el-table>
      </template>
      <!-- 水 -->
      <template>
        <el-table
          :data="water"
          size="mini"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
          style="width: 100%"
        >
          <el-table-column prop="tlt" label="水生态">
            <el-table-column prop="content" label="数据类容"></el-table-column>

            <el-table-column label="数据修改">
              <template slot-scope="scope">
                <el-input
                  type="text"
                  v-model="scope.row.no"
                  @change="change2(scope.row)"
                  style="border: 1px solid #ccc"
                  placeholder="请输入资源数量"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column prop="explain" label="说明"> </el-table-column>
          </el-table-column>
        </el-table>
        <el-table
          :data="waterx"
          size="mini"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
          style="width: 100%"
        >
          <el-table-column prop="tlt" label="">
            <el-table-column prop="content" label=""></el-table-column>

            <el-table-column label="">
              <template slot-scope="scope">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                  <el-form-item label="">
                    <el-select
                      v-model="scope.row.no"
                      placeholder="请选择类别"
                      @change="change5(scope.row)"
                      style="border: 1px solid #ccc; width: 7.7rem"
                    >
                      <el-option label="Ⅰ类" value="Ⅰ类">Ⅰ类</el-option>
                      <el-option label="Ⅱ类" value="Ⅱ类">Ⅱ类</el-option>
                      <el-option label="Ⅲ类" value="Ⅲ类">Ⅲ类</el-option>
                      <el-option label="Ⅳ类" value="Ⅳ类">Ⅳ类</el-option>
                      <el-option label="Ⅴ类" value="Ⅴ类">Ⅴ类</el-option>
                      <el-option label="劣V类" value="劣V类">劣V类</el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>

            <el-table-column prop="explain" label=""> </el-table-column>
          </el-table-column>
        </el-table>
      </template>

      <!-- 森林生态防火 -->
      <template>
        <el-table
          :data="forest"
          size="mini"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
          style="width: 100%"
        >
          <el-table-column prop="tlt" label="森林生态防火">
            <el-table-column prop="content" label="数据类容"></el-table-column>
            <el-table-column label="数据修改">
              <template slot-scope="scope">
                <el-input
                  type="text"
                  v-model="scope.row.no"
                  @change="change3(scope.row)"
                  style="border: 1px solid #ccc"
                  placeholder="请输入资源数量"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column prop="explain" label="说明"> </el-table-column>
          </el-table-column>
        </el-table>
      </template>
      <!-- 井盖 -->
      <template>
        <el-table
          :data="well"
          size="mini"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
          style="width: 100%"
        >
          <el-table-column prop="tlt" label="智能井盖">
            <el-table-column prop="content" label="数据类容"></el-table-column>
            <el-table-column label="数据修改">
              <template slot-scope="scope">
                <el-input
                  type="text"
                  v-model="scope.row.no"
                  @change="change4(scope.row)"
                  style="border: 1px solid #ccc"
                  placeholder="请输入资源数量"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column prop="explain" label="说明"> </el-table-column>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          style="width: 500px; display: block; margin: 100px auto 0"
          @click="handleSubmit"
          >保存</el-button
        >
        <div class="fig"></div>
      </template>
    </main>
  </div>
</template>

<script>
import Top from "@/components/top/Top.vue";
import { ImportResNo } from "@/api/atmosphere";
import { GetAllResNo } from "@/api/api";
export default {
  components: {
    Top,
  },
  data() {
    return {
      form: {
        x: "Ⅰ类",
      },
      data: [],
      arr: [],
      tableData: [
        {
          id: 1104,
          sys: "大气",
          type: "标准站",
          name: "区控",
          no: "",
          content: "监测-标准站-区控（个）",
          explain: "数量",
        },

        {
          id: 1201,
          content: "监测-微站-市控（个）",
          sys: "大气",
          type: "微站",
          name: "市控",
          no: "",
          explain: "数量",
        },
        {
          id: 1203,
          sys: "大气",
          type: "微站",
          name: "城区覆盖",
          no: "",
          content: "监测-微站-城区覆盖（公里/点）",
          explain: "面积/微站数量",
        },
        {
          id: 1204,
          sys: "大气",
          type: "微站",
          name: "乡镇覆盖",
          no: "",
          content: "监测-微站-乡镇覆盖（公里/点）",
          explain: "面积/微站数量",
        },

        {
          id: 1302,
          sys: "大气",
          type: "其他站",
          name: "监测车",
          no: "",
          content: "监测-监测车（X台）",
          explain: "数量",
        },
        {
          id: 1303,
          sys: "大气",
          type: "其他站",
          name: "雷达",
          no: "",
          content: "监测-雷达（X台）",
          explain: "数量",
        },
        {
          id: 1304,
          sys: "大气",
          type: "其他站",
          name: "挥发性有机物",
          no: "",
          content: "监测-挥发性有机物（个）",
          explain: "数量",
        },
        {
          id: 1401,
          sys: "大气",
          type: "污染源",
          name: "二污普",
          no: "",
          content: "大气污染源-农业源（个）",
          explain: "数量",
        },
        {
          id: 1402,
          sys: "大气",
          type: "污染源",
          name: "工业源",
          no: "",
          content: "大气污染源-工业源（个）",
          explain: "数量",
        },
        {
          id: 1403,
          sys: "大气",
          type: "污染源",
          name: "涉VOCs",
          no: "",
          content: "大气污染源-VOCs（个）",
          explain: "数量",
        },
        {
          id: 1404,
          sys: "大气",
          type: "污染源",
          name: "扬尘工地",
          no: "",
          content: "大气污染源-扬尘工地（个）",
          explain: "数量",
        },
        {
          id: 1405,
          sys: "大气",
          type: "污染源",
          name: "餐饮油烟",
          no: "",
          content: "大气污染源-餐饮油烟（个）",
          explain: "数量",
        },
        {
          id: 1406,
          sys: "大气",
          type: "污染源",
          name: "非道路移动源",
          no: "",
          content: "大气污染源-非道路移动源（个）",
          explain: "数量",
        },
        {
          id: 1501,
          sys: "大气",
          type: "许可量",
          name: "NOx（去年）",
          no: "",
          content: "污染物排放-许可量-NOx-去年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1502,
          sys: "大气",
          type: "许可量",
          name: "NOx（今年）",
          no: "",
          content: "污染物排放-许可量-NOx-今年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1503,
          sys: "大气",
          type: "许可量",
          name: "SO2（去年）",
          no: "",
          content: "污染物排放-许可量-SO2-去年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1504,
          sys: "大气",
          type: "许可量",
          name: "SO2（今年）",
          no: "",
          content: "污染物排放-许可量-SO2-今年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1505,
          sys: "大气",
          type: "许可量",
          name: "VOCs（去年）",
          no: "",
          content: "污染物排放-许可量-VOCs-去年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1506,
          sys: "大气",
          type: "许可量",
          name: "VOCs（今年）",
          no: "",
          content: "污染物排放-许可量-VOCs-今年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1601,
          sys: "大气",
          type: "排放量",
          name: "NOx（去年）",
          no: "",
          content: "污染物排放-排放量-NOx-去年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1602,
          sys: "大气",
          type: "排放量",
          name: "NOx（今年）",
          no: "",
          content: "污染物排放-排放量-NOx-今年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1603,
          sys: "大气",
          type: "排放量",
          name: "SO2（去年）",
          no: "",
          content: "污染物排放-排放量-SO2-去年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1604,
          sys: "大气",
          type: "排放量",
          name: "SO2（今年）",
          no: "",
          content: "污染物排放-排放量-SO2-今年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1605,
          sys: "大气",
          type: "排放量",
          name: "VOCs（去年）",
          no: "",
          content: "污染物排放-排放量-VOCs-去年（t/a）",
          explain: "(t/a)",
        },
        {
          id: 1606,
          sys: "大气",
          type: "排放量",
          name: "VOCs（今年）",
          no: "",
          content: "污染物排放-排放量-VOCs-今年（t/a）",
          explain: "(t/a)",
        },
      ],
      water: [
        {
          id: 2102,
          sys: "水",
          type: "水质监测站",
          name: "府河",
          no: "",
          content: "监测-水质-府河（个）",
          explain: "站点数量",
        },
        {
          id: 2103,
          sys: "水",
          type: "水质监测站",
          name: "东风渠",
          no: "",
          content: "监测-水质-东风渠（个）",
          explain: "站点数量",
        },

        {
          id: 2201,
          sys: "水",
          type: "流量监测站",
          name: "兴隆湖",
          no: "",
          content: "监测-流量-兴隆湖（个）",
          explain: "数量",
        },
        {
          id: 2202,
          sys: "水",
          type: "干湿沉降仪",
          name: "兴隆湖",
          no: "",
          content: "监测-干湿沉降仪-兴隆湖（个）",
          explain: "数量",
        },
        {
          id: 2203,
          sys: "水",
          type: "气象站",
          name: "兴隆湖",
          no: "",
          content: "监测-气象站-兴隆湖（个）",
          explain: "数量",
        },
        {
          id: 2301,
          sys: "水",
          type: "污染源",
          name: "农业源",
          no: "",
          content: "涉水污染源-农业源（个）",
          explain: "污染源数量",
        },
        {
          id: 2302,
          sys: "水",
          type: "污染源",
          name: "工业源",
          no: "",
          content: "涉水污染源-工业源（个）",
          explain: "污染源数量",
        },
        {
          id: 2401,
          sys: "水",
          type: "河湖排口个数",
          name: "鹿溪河",
          no: "",
          content: "河湖排口-鹿溪河（个）",
          explain: "入河湖废水排放口数量",
        },
        {
          id: 2402,
          sys: "水",
          type: "河湖排口个数",
          name: "府河",
          no: "",
          content: "河湖排口-府河（个）",
          explain: "入河湖废水排放口数量",
        },
        {
          id: 2403,
          sys: "水",
          type: "河湖排口个数",
          name: "东风渠",
          no: "",
          content: "河湖排口-东风渠（个）",
          explain: "入河湖废水排放口数量",
        },
        {
          id: 2404,
          sys: "水",
          type: "河湖排污口个数",
          name: "兴隆湖",
          no: "",
          content: "河湖排口-兴隆湖（个）",
          explain: "入河湖废水排放口数量",
        },

        {
          id: 2601,
          sys: "水",
          type: "污染排放许可量",
          name: "总磷（今年）",
          no: "",
          content: "污染物排放-许可量-总磷-今年（t/a）",
          explain: "吨/年",
        },
        {
          id: 2602,
          sys: "水",
          type: "污染排放许可量",
          name: "总磷（去年）",
          no: "",
          content: "污染物排放-许可量-总磷-去年（t/a）",
          explain: "吨/年",
        },
        {
          id: 2603,
          sys: "水",
          type: "污染排放许可量",
          name: "总氮（今年）",
          no: "",
          content: "污染物排放-许可量-总氮-今年（t/a）",
          explain: "吨/年",
        },

        {
          id: 2604,
          sys: "水",
          type: "污染排放许可量",
          name: "总氮（去年）",
          no: "",
          content: "污染物排放-许可量-总氮-去年（t/a）",
          explain: "吨/年",
        },

        {
          id: 2605,
          sys: "水",
          type: "污染排放许可量",
          name: "氨氮（今年）",
          no: "",
          content: "污染物排放-许可量-氨氮-今年（t/a）",
          explain: "吨/年",
        },
        {
          id: 2606,
          sys: "水",
          type: "污染排放许可量",
          name: "氨氮（去年）",
          no: "",
          content: "污染物排放-许可量-氨氮-去年（t/a）",
          explain: "吨/年",
        },

        {
          id: 2607,
          sys: "水",
          type: "污染排放许可量",
          name: "化学需氧量（今年）",
          no: "",
          content: "污染物排放-许可量-化学需氧量-今年（t/a）",
          explain: "吨/年",
        },
        {
          id: 2608,
          sys: "水",
          type: "污染排放许可量",
          name: "化学需氧量（去年）",
          no: "",
          content: "污染物排放-许可量-化学需氧量-去年（t/a）",
          explain: "吨/年",
        },

        {
          id: 2701,
          sys: "水",
          type: "污染排放量",
          name: "总磷（今年）",
          no: "",
          content: "污染物排放-排放量-总磷-今年（t/a）",
          explain: "吨/年",
        },
        {
          id: 2702,
          sys: "水",
          type: "污染排放量",
          name: "总磷（去年）",
          no: "",
          content: "污染物排放-排放量-总磷-去年（t/a）",
          explain: "吨/年",
        },

        {
          id: 2703,
          sys: "水",
          type: "污染排放量",
          name: "总氮（今年）",
          no: "",
          content: "污染物排放-排放量-总氮-今年（t/a）",
          explain: "吨/年",
        },
        {
          id: 2704,
          sys: "水",
          type: "污染排放量",
          name: "总氮（去年）",
          no: "",
          content: "污染物排放-排放量-总氮-去年（t/a）",
          explain: "吨/年",
        },

        {
          id: 2705,
          sys: "水",
          type: "污染排放量",
          name: "氨氮（今年）",
          no: "",
          content: "污染物排放-排放量-氨氮-今年（t/a）",
          explain: "吨/年",
        },
        {
          id: 2706,
          sys: "水",
          type: "污染排放量",
          name: "氨氮（去年）",
          no: "",
          content: "污染物排放-排放量-氨氮-去年（t/a）",
          explain: "吨/年",
        },

        {
          id: 2707,
          sys: "水",
          type: "污染排放量",
          name: "化学需氧量（今年）",
          no: "",
          content: "污染物排放-排放量-化学需氧量-今年（t/a）",
          explain: "吨/年",
        },
        {
          id: 2708,
          sys: "水",
          type: "污染排放量",
          name: "化学需氧量（去年）",
          no: "",
          content: "污染物排放-排放量-化学需氧量-去年（t/a）",
          explain: "吨/年",
        },
      ],
      waterx: [
        {
          id: 2501,
          sys: "水",
          type: "河湖排口水质",
          name: "鹿溪河水质（目标）",
          no: "",
          content: "质量-鹿溪河-目标水质（X类）",
          explain: "水系整体目标水质",
        },
        {
          id: 2502,
          sys: "水",
          type: "河湖排口水质",
          name: "鹿溪河水质（当前）",
          no: "",
          content: "质量-鹿溪河-当前水质（X类）",
          explain: "当前整体水质:I类~劣V类共6类",
        },
        {
          id: 2503,
          sys: "水",
          type: "河湖排口水质",
          name: "府河水质（目标）",
          no: "",
          content: "质量-府河-目标水质（X类）",
          explain: "水系整体目标水质",
        },
        {
          id: 2504,
          sys: "水",
          type: "河湖排口水质",
          name: "府河水质（当前）",
          no: "",
          content: "质量-府河-当前水质（X类）",
          explain: "当前整体水质:I类~劣V类共6类",
        },
        {
          id: 2505,
          sys: "水",
          type: "河湖排口水质",
          name: "东风渠水质（目标）",
          no: "",
          content: "质量-东风渠-目标水质（X类）",
          explain: "水系整体目标水质",
        },
        {
          id: 2506,
          sys: "水",
          type: "河湖排口水质",
          name: "东风渠水质（当前）",
          no: "",
          content: "质量-东风渠-当前水质（X类）",
          explain: "当前整体水质:I类~劣V类共6类",
        },
        {
          id: 2507,
          sys: "水",
          type: "河湖排口水质",
          name: "兴隆湖水质（目标）",
          no: "",
          content: "质量-兴隆湖-目标水质（X类）",
          explain: "水系整体目标水质",
        },
        {
          id: 2508,
          sys: "水",
          type: "河湖排口水质",
          name: "兴隆湖水质（当前）",
          no: "",
          content: "质量-兴隆湖-当前水质（X类）",
          explain: "当前整体水质:I类~劣V类共6类",
        },
      ],

      // 森林
      forest: [
        {
          id: 3101,
          sys: "森林",
          type: "林地",
          name: "总面积（平方千米）",
          no: "",
          content: "林地-总面积（k㎡）",
          explain: "数量",
        },
        {
          id: 3102,
          sys: "森林",
          type: "林地",
          name: "森林防火区域（平方千米）",
          no: "",
          content: "林地-森林防火区域（k㎡）",
          explain: "数量",
        },
      ],
      // 井盖
      well: [
        {
          id: 4101,
          sys: "井盖",
          type: "井盖",
          name: "总数",
          no: "",
          content: "井盖资源-井盖总数",
          explain: "天府新区总数量",
        },
        {
          id: 4102,
          sys: "井盖",
          type: "井盖",
          name: "通用",
          no: "",
          content: "井盖资源-通用（个）",
          explain: "本类井盖数量",
        },
        {
          id: 4103,
          sys: "井盖",
          type: "井盖",
          name: "移动",
          no: "",
          content: "井盖资源-移动（个）",
          explain: "本类井盖数量",
        },
        {
          id: 4104,
          sys: "井盖",
          type: "井盖",
          name: "联通",
          no: "",
          content: "井盖资源-联通（个））",
          explain: "本类井盖数量",
        },
        {
          id: 4105,
          sys: "井盖",
          type: "井盖",
          name: "广电",
          no: "",
          content: "井盖资源-广电（个））",
          explain: "本类井盖数量",
        },
        {
          id: 4106,
          sys: "井盖",
          type: "井盖",
          name: "水务",
          no: "",
          content: "井盖资源-水务（个）",
          explain: "本类井盖数量",
        },
        {
          id: 4107,
          sys: "井盖",
          type: "井盖",
          name: "电力",
          no: "",
          content: "井盖资源-电力（个）",
          explain: "本类井盖数量",
        },
        {
          id: 4108,
          sys: "井盖",
          type: "井盖",
          name: "燃气",
          no: "",
          content: "井盖资源-燃气（个）",
          explain: "本类井盖数量",
        },
        {
          id: 4109,
          sys: "井盖",
          type: "井盖",
          name: "雨水",
          no: "",
          content: "井盖资源-雨水（个）",
          explain: "本类井盖数量",
        },
        {
          id: 4110,
          sys: "井盖",
          type: "井盖",
          name: "污水",
          no: "",
          content: "井盖资源-污水（个））",
          explain: "本类井盖数量",
        },
      ],
    };
  },
  async created() {
    await this.AllResNo();
  },
  computed: {
    arrLength() {
      return this.arr.length;
    },
  },
  methods: {
    change5(row) {
      // console.log(row)
      console.log(row);
      if (row.no == "Ⅰ类") {
        row.no = 1;
      } else if (row.no == "Ⅱ类") {
        row.no = 2;
      } else if (row.no == "Ⅲ类") {
        row.no = 3;
      } else if (row.no == "Ⅳ类") {
        row.no = 4;
      } else if (row.no == "Ⅴ类") {
        row.no = 5;
      } else {
        row.no = 6;
      }
      const obj = {
        sys: row.sys,
        type: row.type,
        name: row.name,
        no: row.no,
      };
      this.arr.push(obj);
    },
    // 查询智慧生态资源数量
    async AllResNo() {
      let res = await GetAllResNo({});
      this.data = JSON.parse(res.data.data);
      // 大气
      this.tableData.map((item) => {
        return this.data.map((items) => {
          if (item.id == items.restyepid) {
            item.no = items.no;
            return item;
          }
        });
      });
      // 水
      this.water.map((item) => {
        return this.data.map((items) => {
          if (item.id == items.restyepid) {
            item.no = items.no;
            return item;
          }
        });
      });
      this.waterx.map((item) => {
        return this.data.map((items) => {
          if (item.id == items.restyepid) {
            item.no = items.no;
            if (item.no == 1) {
              item.no = "Ⅰ类";
            } else if (item.no == 2) {
              item.no = "Ⅱ类";
            } else if (item.no == 3) {
              item.no = "Ⅲ类";
            } else if (item.no == 4) {
              item.no = "Ⅳ类";
            } else if (item.no == 5) {
              item.no = "Ⅴ类";
            } else {
              item.no = "劣V类";
            }
            return item;
          }
        });
      });

      // 森林
      this.forest.map((item) => {
        return this.data.map((items) => {
          if (item.id == items.restyepid) {
            item.no = items.no;
            return item;
          }
        });
      });
      // 井盖
      this.well.map((item) => {
        return this.data.map((items) => {
          if (item.id == items.restyepid) {
            item.no = items.no;
            return item;
          }
        });
      });
    },
    change1(row) {
      if (row.no < 0) {
        this.$message({
          type: "error",
          message: "数据不能小于0",
        });
        row.no = "";
        return;
      }

      const obj = {
        sys: row.sys,
        type: row.type,
        name: row.name,
        no: row.no,
      };
      this.arr.push(obj);
    },
    change2(row) {
      if (row.no < 0) {
        this.$message({
          type: "error",
          message: "数据不能小于0",
        });
        row.no = "";
        return;
      }
      const obj = {
        sys: row.sys,
        type: row.type,
        name: row.name,
        no: row.no,
      };
      this.arr.push(obj);
    },
    change3(row) {
      if (row.no < 0) {
        this.$message({
          type: "error",
          message: "数据不能小于0",
        });
        row.no = "";
        return;
      }
      const obj = {
        sys: row.sys,
        type: row.type,
        name: row.name,
        no: row.no,
      };
      this.arr.push(obj);
    },
    change4(row) {
      if (row.no < 0) {
        this.$message({
          type: "error",
          message: "数据不能小于0",
        });
        row.no = "";
        return;
      }
      const obj = {
        sys: row.sys,
        type: row.type,
        name: row.name,
        no: row.no,
      };
      this.arr.push(obj);
    },
    // 提交
    async handleSubmit() {
      let res = await ImportResNo(this.arr);
      if (res.data.code == "0000") {
        this.$message({
          type: "success",
          message: "数据导入成功!",
        });
        setTimeout(() => {
          window.location.reload();
        }, 1000);
      } else {
        this.$message({
          type: "error",
          message: res.data.message,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.channel {
  width: 100%;
  height: 100%;
  position: relative;
}
main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 1;
}
.fig {
  width: 100%;
  height: 100px;
}
</style>